<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- document节点表示的是整个载入的网页，他的实例是全局的document对象 -->
    <!-- 对DOM的所有操作都是从document对象开始的 -->
    <!-- 注释也会抽象成文档对象模型 -->
    <!-- 抽象成文档对象模型时 -->
    普通的文本

    <div class="box">
      <h2>我是标题</h2>
      <p>我是内容, 哈哈哈哈哈哈啊哈哈哈</p>
    </div>

    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>

    <input type="text" />
    <button name="Lily">搜索</button>

    <script>
      // DOM网页
      var boxEl = document.body.children[0];
      // console.log(boxEl);
      boxEl.style.color = "red";

      boxEl.children[0].style.fontSize = "100px";
      boxEl.children[0].nextElementSibling.style.color = "orange";

      // var htmlEl = document.documentElement
      // var bodyEl = document.body
      // var headEl = document.head
      // var doctype = document.doctype
      // console.log(htmlEl, bodyEl, headEl, doctype)

      // 1.获取所有节点的导航
      var bodyEl = document.body;
      // 1.1.获取body所有的子节点
      // console.log(bodyEl.childNodes);
      // 1.2.获取body的第一个子节点
      var bodyElFirstChild = bodyEl.firstChild;
      // 1.3.获取body中的注释
      var bodyElCommentChild = bodyElFirstChild.nextSibling;
      // console.log(bodyElCommentChild);
      // 1.4.获取body的父节点
      var bodyParent = bodyEl.parentNode;
      // console.log(bodyParent);

      // 2.获取所有元素的导航（不包含注释）
      var bodyEl = document.body;
      // 根据body元素去获取子元素(element)
      var childElements = bodyEl.children;
      console.log(childElements);

      // 获取box元素
      var boxEl1 = bodyEl.firstElementChild;
      console.log(bodyEl.children); //获取body所有的子元素
      var boxEl2 = bodyEl.children[0];
      console.log(boxEl1, boxEl2, boxEl1 === boxEl2);
      // 获取ul元素
      var ulEl = boxEl1.nextElementSibling;
      console.log(ulEl);

      // 获取li元素
      var liEls = ulEl.children;
      console.log(liEls);
    </script>

    <script>
      var obj = {
        name: "Lily",
        age: 18,
        body: document.querySelector("body"),
      };
      console.log(obj.name, obj.age, obj.body);
      // document就是一个对象
      document.body = document.querySelector("body");
      window.body = document.querySelector("body");
      document.age = 18;

      // 原生DOM操作
      var divEl = document.createElement("div");
      divEl.innerHTML = "helloworld";
      divEl.classList.add("active");

      // 框架中的template => 虚拟DOM => 原生DOM（可能引起重绘回流问题）
    </script>
  </body>
</html>
